$(function () {
    let layer = layui.layer;
    initArtCateList();
    function initArtCateList() {
        axios({
            method: "GET",
            url: "/my/article/cates",
        }).then((res) => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            let arr = [];
            let index = 0;
            res.data.data.forEach((ele) => {
                index++;
                arr.push(`
                <tr>
                    <td>${index}</td>
                    <td>${ele.name}</td>
                    <td>${ele.alias}</td>
                    <td>
                        <button type="button" data-id="${ele.Id}" class=" btn-edit layui-btn layui-btn layui-btn-xs">编辑</button>
                        <button data-id="${ele.Id}" type="button" class="btn-delete layui-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                  </tr>
                `);
            });
            $("tbody").empty().html(arr.join(""));
        });
    }
    let indexAdd = null;
    $("#btnAdd").on("click", function () {
        indexAdd = layer.open({
            type: 1,
            title: "添加文章分类",
            area: ["500px", "300px"],
            content: `
            <form class="layui-form" id="formAdd">
              <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                   <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                   <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                   <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
            `,
        });
    });
    $('body').on('submit', '#formAdd', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('添加成功')
            layer.close(indexAdd)
            initArtCateList()
        })
    })
    let indexEdit = null;
    let form = layui.form
    $('tbody').on('click', '.btn-edit', function () {
        indexEdit = layer.open({
            type: 1,
            title: "修改文章分类",
            area: ["500px", "300px"],
            content: `
            <form lay-filter="formEdit" class="layui-form" id="formEdit">
            <input type='hidden' name='Id'>
              <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                   <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                   <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                   <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
            `
        })
        let id = $(this).attr('data-id')
        axios({
            method: 'GET',
            url: '/my/article/cates/' + id,
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            form.val('formEdit', res.data.data)
        })
    })
    $('body').on('submit', '#formEdit', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('修改成功')
            layer.close(indexEdit)
            initArtCateList()
        })
    })
    $('tbody').on('click', '.btn-delete', function () {
        let id = $(this).attr('data-id')
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            axios({
                method: "GET",
                url: '/my/article/deletecate/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('删除成功')
                initArtCateList()
            })
            layer.close(index)
        })
    })
});
